/**
* Offline Page
*
* Displayed when the user is offline and no cached version is available.
*/
import { WifiOff, RefreshCw, Home } from 'lucide-react';
import Link from 'next/link';
export const metadata = {
title: 'Offline',
description: 'You are currently offline',
};
export default function OfflinePage() {
return (
<div className="min-h-screen bg-bg-primary flex items-center justify-center p-4">
<div className="max-w-md w-full text-center">
{/* Icon */}
<div className="mb-8">
<div className="inline-flex items-center justify-center w-24 h-24 rounded-full bg-bg-elevated border-2 border-border-subtle">
<WifiOff className="w-12 h-12 text-text-tertiary" />
</div>
</div>
{/* Title */}
<h1 className="text-3xl font-bold text-text-primary mb-4">
You're Offline
</h1>
{/* Description */}
<p className="text-lg text-text-secondary mb-8">
It looks like you've lost your internet connection.
Some features may not be available until you're back online.
</p>
{/* What's available */}
<div className="bg-bg-elevated rounded-lg p-6 mb-8 text-left">
<h2 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider mb-3">
While offline, you can:
</h2>
<ul className="space-y-2 text-text-secondary">
<li className="flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-green-500" />
View previously loaded pages
</li>
<li className="flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-green-500" />
Access cached MP information
</li>
<li className="flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-green-500" />
Read saved debates
</li>
</ul>
</div>
{/* Actions */}
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<button
onClick={() => window.location.reload()}
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-accent-red text-white font-medium rounded-lg hover:bg-accent-red/90 transition-colors"
>
<RefreshCw className="w-5 h-5" />
Try Again
</button>
<Link
href="/"
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-bg-elevated text-text-primary font-medium rounded-lg border border-border-subtle hover:bg-bg-overlay transition-colors"
>
<Home className="w-5 h-5" />
Go Home
</Link>
</div>
{/* Status indicator */}
<div className="mt-12 text-sm text-text-tertiary">
<p>
This page will automatically refresh when you're back online.
</p>
</div>
{/* Auto-refresh script */}
<script
dangerouslySetInnerHTML={{
__html: `
window.addEventListener('online', function() {
window.location.reload();
});
`,
}}
/>
</div>
</div>
);
}
